import { defineStore } from 'pinia';
import { ref } from 'vue';

export const useThemeStore = defineStore(
	'themes',
	() => {
		// 设置drawer
		const currentSettingDrawer = ref<boolean>(false);
		const toggleSettingDrawer = (value:boolean) => {
			currentSettingDrawer.value = value;
		};
		
		// theme
		const currentTheme = ref<string>('light');
		const toggleTheme = (value:string) => {
			currentTheme.value = value;
			const htmlEl = document.documentElement;
			if (currentTheme.value === 'dark') {
				htmlEl?.classList.remove('light');
				htmlEl?.classList.add('dark');
			} else {
				htmlEl?.classList.remove('dark');
				htmlEl?.classList.add('light');
			}
		};

		// layout
		const currentLayout = ref<string>('default');
		const toggleLayout = (value:string) => {
			currentLayout.value = value;
		};

		return {
			currentSettingDrawer,
			toggleSettingDrawer,
			currentTheme,
			toggleTheme,
			currentLayout,
			toggleLayout,
		};
	},
	{
		// persist: true,
		persist: {
			storage: sessionStorage
		}
	}
);
